<template>
  <j-editable-table
    ref="editableTable"
    :loading="loading"
    :columns="columns"
    :dataSource="dataSource"
    dragSortKey="sort"
    :dragSort="true"
    :rowNumber="true"
    :maxHeight="305"
    :disabled="disabled"
    @dragged="handleDragged" />
</template>

<script>
import { FormTypes } from '@/utils/JEditableTableUtil'
export default {
  name: 'DBAttrTable',
  inject: ['getAllTable'],
  props: {
    actionButton: {
      type: Boolean,
      default: true,
      required: false
    },
    operateButton: {
      type: Number,
      default: 0,
      required: false
    }
  },
  data() {
    return {
      deleteIds: [],
      loading: false,
      disabled: false,
      selectedRowKeys: [],
      dataSource: [],
      columns: [
        {
          title: '字段名称',
          key: 'columnName',
          width: '20%',
          type: FormTypes.input,
          defaultValue: null,
          disabled: true
        },
        {
          title: '字段描述', // 必填
          key: 'columnDesc',
          width: '20%',
          type: FormTypes.input,
          defaultValue: '',
          disabled: true
        },
        {
          title: '是否必填',
          key: 'notNull',
          width: '15%',
          disabled: false,
          type: FormTypes.checkbox,
          customValue: ['1', '0'],
          defaultChecked: true
        },
        {
          title: '查询条件',
          key: 'isQuery',
          width: '15%',
          disabled: false,
          type: FormTypes.checkbox,
          customValue: ['1', '0'],
          defaultChecked: true
        },
        {
          title: '列表展示',
          key: 'isShowList',
          width: '15%',
          type: FormTypes.checkbox,
          customValue: ['1', '0'],
          defaultChecked: false
        },
        {
          title: '表单展示',
          key: 'isShowForm',
          width: '15%',
          type: FormTypes.checkbox,
          customValue: ['1', '0'],
          defaultChecked: false
        }
      ],
      addBatching: false
    }
  },
  created() {
    this.jet = null
    this.initialTable()
  },
  mounted() {
    this.jet = this.$refs.editableTable
  },
  methods: {
    /* 初始化列表 */
    initialTable() {
      this.dataSource = []
      this.deleteIds = []
      this.selectedRowKeys = []
    },
    handleAdded() {
      this.$emit('added', this)
    },
    handleDeleted() {
      this.$emit('deleted', this)
    },
    handleDragged(event) {
      this.$emit('dragged', {
        oldIndex: event.oldIndex,
        newIndex: event.newIndex,
        target: this
      })
    },
    handleInserted(event) {
      this.$emit('inserted', { ...event, target: this })
    },
    handleValueChange(event) {
      const { type, row, column, value, target } = event
      if (type === FormTypes.select && column.key === 'dbType') {
        // 当字段类型改为Date时触发同步事件，同步控件类型为日期选择器
        if (value === 'Date') this.$emit('syncDbType', { row, value, target: this })
        // 字段类型Blob、Date、Text 将字段长度改为0
        if (value === 'Blob' || value === 'Text' || value === 'Date') {
          target.setValues([{ rowKey: row.id, values: { dbLength: '0' }}])
        } else if (value === 'int' || value === 'double' || value === 'BigDecimal') {
          target.setValues([{ rowKey: row.id, values: { dbLength: '10' }}])
        } else if (row['dbLength'] === '0') {
          target.setValues([{ rowKey: row.id, values: { dbLength: '32' }}])
        }
      }
    },
    /** 新增一行，并反馈给父组件 */
    tableAddLine(newLine) {
      this.$refs.editableTable.push(newLine)
      // 正在批量添加数据，不单独反馈
      if (!this.addBatching) this.$emit('added', this)
    },
    tableDeleteLines(idArr) {
      this.$refs.editableTable.removeRows(idArr)
    },
    /** 开始批量添加数据，在此期间添加的数据不会反馈给父组件进行同步 */
    addBatchBegin() {
      this.addBatching = true
      this.loading = true
    },
    /** 结束批量添加数据，会立即反馈给父组件进行同步数据 */
    addBatchEnd() {
      this.addBatching = false
      this.loading = false
      this.$emit('added', this)
    }
  }
}
</script>
